Personalizar los comentarios siempre ha sido algo que antes o después todos hacemos, con jQuery podemos añadir color a los comentarios en dos sencillos pasos.
La idea la vi en The Technology Hub y la forma de hacerlo es la siguiente:

Justo antes de </head> añadimos:

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

El siguiente paso es añadir el script que contiene el color de fondo justo antes de </body> ya sabéis, al final de la plantilla.

<script type="text/javascript">
$(document).ready(function() {
$("#comments-block dt").each(function(i){
var divId='zpk' + i.toString();
$(this).before("<div id='" + divId + "'></div>");
$(this).next().next().prependTo("#" + divId);
$(this).next().prependTo("#" + divId);
$(this).prependTo("#" + divId);
$("#" + divId).css("padding","10px");
if(i%2==0){
$("#" + divId).css("background-color","#B8D62F");
}else{
$("#" + divId).css("background-color","#DFF294");
}
});
});
</script>

En background-color podemos sustituir los colores.



También con jQuery podemos añadir el número de orden en los comentarios, bastaría con incluir justo antes de </head> lo siguiente.

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>
(Si incluimos el anterior script para añadir color no es necesario volver a añadirlo)

También añadimos antes de </head>

<script type="text/javascript">
$(document).ready(function() {
$("#comments-block").find("dt").each(function(i){
$(this).prepend("<span style='color:red;margin-right:2px;"
+ "padding:2px;background-color:silver'>"
+ (i+1).toString() + ".</span>" );
});
});
</script>

En color:red tenemos el color del número.
Con background-color:silver añadimos color al fondo del número, si no deseamos color de fondo bastará con suprimir esa parte.



+*Gemma*+

Buenas tocaya, muy útil este truco, creo que lo utilizaré...
Disculpa que te haga la consulta aqui, pero es que intenté poner el efecto rollover sobre una imagen, de aqui de tu blog, y creo que he roto algo de la plantilla, ahora me da un fallo al tratar de entrar desde IE...no es que yo lo use, pero como no se puede controlar desde dónde entran tus visitas...pues no me hace gracia tenerlo asi...qué puedo hacer?? he dado mil vueltas a la plantilla, y no encuentro el fallo...me puedes ayudar?

Responder
Pily

Este post me ha caido de perlas¡¡¡ Acabo de cambiar la plantilla y no sabia como cambiar el fondo del formato de comentarios¡

Gracias :)

Responder
Triki

Hola Que tal! Tengo un blog de fotografía se llama "En Busca de la Mejor Foto"
la dirección es: http://buscandolafoto.blogspot.com/
y estoy regalando gratis espacios para tu favicón, de momemto creo que pondre hasta 100.
Anímate a esta fiebre del 2009

Responder
Admin

Hay mi Dios :D no vuelvo a tocar los comentarios, ya bastaaa ;)
No, en serio está lindo, una preguntita solo de curiosa, no voy a cambiar nada ehh :O no, no, me niegoooo...
En background color de los coments, no del número, como se sabe cual es del autor y cual el del comentarista?

Otra pavadita... leíste el título de este post? ja ja :D Si lo hiciste, volvé a hacerlo por favor ja ja

Responder
Admin

Y los emoticones??? Se fueron???

Responder
Gem@

yz Gemma no sé ese fallo que puede ser el blog se ve sin problemas con Explorer, de todas formas por añadir un efecto rollover en una entrada no se produce ese problema :O

yz Pues todo tuyo Pilyboop :)

yz Gracias Triki si que parece una fiebre últimamente todo el mundo los añade :)

yz No se sabe k_nelita, salen los colores alternos es diferente al que tenemos tu y yo aplicado. es como añadir un color a los pares y otro a los impares :)
¿A qué emoticones te refieres? yo los veo :O

Responder
Gem@

yz Rectifiqué el título k_nelita menos mal que estás ahí :)

Responder
Admin

Ja ja... no los emoticones no salen... hasta le desabilité el adblock y no, no se ven solo los símbolos... veo que estás poniendo ahora antes de escribir una y y una z y no se que es eso... porque yo no veo ningún emoticón? Ya me enteré por allí que estuviste haciendo arreglos con eso, pero yo no veo ni lo nuevo ni lo de antes...
Preguntá a alguien mas, en mi blog si los veo...

Responder
E-migrad@

Me viene muy bien este post, Gem@... soy nuev@ en esto y el tema de mejorar el look de los comentarios era algo pendiente.

Te dejo un link para que leas cuando tengas tiempo:

http://migraciones--internas.blogspot.com/2009/01/primer-mes-de-migraciones-internas.html

Gracias ;)

Responder
Gem@

yz k_nelita tendremos que preguntar, modifiqué el script de los emoticones pero J.Miur si los veía en el blog de pruebas y aquí es el mismo.

yz Gracias E-migrad bienvenido.

Responder
Admin

Ahora si gem@ veo hasta el nuevito ese que es como un cuadradito que pones al comenzar a escribir, que lindo! :D por lo visto se hace yz no?

Responder
Gem@

yz Si k_nelita lo añadí para señalar mis respuestas :)

Responder
Admin

Muy lindo gem@, queda muy fino y elegante, yo podría hacer algo así pero en otro color?

Has cambiado algún otro emoticón o solo agregaste ese? ;)

Responder
Bonzu Pipinpadaloxicopolis III

Muy simple y facil, lo malo es tener que cargar un archivo externo, y yo sigo sin solucionar el problema enlace-comentario espesífico.

Responder
Bonzu Pipinpadaloxicopolis III

será un problema en la plantilla??

en un principio no se veían los emoticones, ahora si (lei el comentario anterior de k_nelita)

Responder
Anónimo

:)Gema viene muy bien para los que no han realizado cambios allí...siempre hay nuevos blogs y ofrecerles alternativas está muy bueno!!! yo ni los toco, con el tiempo que me han llevado!!! mis besos!!!

Responder
Gem@

yz Te mando explicación al correo K_nelita aquí sería extenso ;)

yz Bonzu cualquier archivo externo es un riesgo que deje de funcionar pero en este caso no existe el problema que funcione mal algo simplemente se mostrarían los comentarios sin color de fondo.
Pensaba que J.Miur te había dado la solución aL problema de enlaces-cometarios :O

yz Así es Graciela es muy sencillo y no asusta añadirlo :)
J.Miur siempre dice... Si algo funciona mejor no tocarlo (y tiene toda la razón del mundo porque a veces por cambiar lo que conseguimos es estropearlo)

Responder
Iherba

Gracias Gema por éste tutorial.

Soy nueva en ésto de los blogs y tengo poca idea, pero he seguido tus pasos y me ha salido a la primera.

Un saludo. iherba

Responder
Anónimo

:s va! que raro no salio mi coment? bueno te felicito por esas grandes ideas... y seria un honor tener un comentario tuyo en mi blog :D

Responder
Gem@

Gracias a ti Iherba por comentar :)

yz Emma los editores de comentarios funcionan cuando quieren ¿no lo sabías? llevamos meses así. Pasé por tu blog ;)

Responder
Bonzu Pipinpadaloxicopolis III

☝ Me dió obciones y alternativas, pero ninguna funcionó.

Responder
Codi Global

Hola Gema te deseo una buena y fría tarde, aún que parezca raro a mi me gusta tal y como lo presenta blogger pero creo que ya va siendo hora de personalizar los mios y tu post me ha gustado sin lugar a dudas que lo tendré muy presente para hacerlo.

Responder
Codi Global

P.D. Lo de fría porque realmente hace una tarde muy fría, no porque quiero que tu tengas frío ;)

Responder
Gem@

Recuerdo que lo estuve mirando Bonzu y es extraño, muy extraño que siguiendo los pasos de J.Miur no resultara :(

yz Te entendí Sisco.
Aquí también hace frío |O

Responder
Bonzu Pipinpadaloxicopolis III

Parece que también se quedó con un gigante ?

Responder
Gem@

No entiendo tu comentario Bonzu.

Responder
Unknown

Hola gema me encanta tu blog y realmente ahora es uno de mis favritos, tenbien te escrbo para desirte si me puedes ayudar con un problema que tengo y es que mis visitantes no me pueden ejar comentarios en las entradas de mi blog porque la ventanillas no se habren y ya barias personas me an escrito disiendome lo mismo, y he canbiadola plantilla y el problema es el mismo, me puedes ayudar?
gracias.

Responder
Gem@

Llovely mira si tienes marcada la opción de mostrar comentarios.
En Configuración/Comentarios lo puedes ver, otro sitio para mirar es en la plantilla de diseño donde dice Entradas del blog un poco más abajo hay un enlace "Editar" clicas ahí y mira si está marcada la casilla de comentarios.

Responder
Unknown

no consigo que me funcione :s

Responder
Gem@

En qué blog lo estás añadiendo MigueL?

Responder
Unknown

en http://migueljimenezz.blogspot.com, hasta ahora estoy poniendole lo que mas me gusta,
y tu blog y el de jmiur me han ayudado un resto!

:) gracias

Responder
Gem@

Lo he comprobado MigueL y el script está correcto, prueba a mover el primero (jquery-latest.min.js') justo antes de </head>

Responder
Unknown

noo,no me funciona :((

Responder
Gem@

Queda la opción de hacerlo de otra forma ΜigueŁ aquí encontrarás otra forma de darles color.

Responder
Unknown

Muchas gracias por tu ayuda, de todas maneras decidi cambiar de plantilla (y dejar de intentar crearla yo mismo), aunque sigue sin dejarme hacer esto...pero intentaré tu recomendacion.

gracias! :)

Responder
Gem@

yz Estupendo Miguel :)

Responder
ana

lo siento Gema por preguntar tanto y abusar de tu generosidad.

Me he dado cuena hace ya unos dias que si creo un enlace, dicho enlace se pone de un color verde oscurito y que al pasar el raton por encima cambia de color conforme este el color del titulo de las entradas.

Antes tenia el color de los titutulos de las entradas azul y entonces los enlaces al pasar el raton por encima tomaban el color azul, ahora cambie el color del titulo de las entradas por naranja y el enlace toma color naranja, alguna forma de solucionarlo por fis. No quiero que haga ese efecto.


lo puedes ver aqui

http://pruebadqq.blogspot.com/

Responder
Gem@

yz Vamos a intentar solucionarlo Ana.
Busca en tu plantilla donde dice:
#outer-wrapper {
font:normal normal 100% Verdana, sans-serif;
}
a {
color:#38B63C;
}
a:hover {
color:#f2984c;
}
a img {
border-width: 0;
}
Eliminas lo que está en negrita, y te sitúas en:
body {
margin:0px;
padding:0px;
background:#000000;
color:#ffffff;
font-size: small;
}
justo después añades:
a:link {color:#ffffff;text-decoration:none;}
a:visited {color:#ffffff;text-decoration:none;}
a:hover {color:#ffffff;text-decoration:none;}
a img {border-width:0;}

Te aparecen todos los enlaces en blanco (#ffffff) los modificas de forma que:
» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:hover "con el cursor encima"

Ya me dices si ordenando eso se soluciona ;)

Responder
ana

Si Gema muchas gracias se solucionó pero surgió otro problema, pero supongo que será fácil solucionarlo, los enlaces no salen subrayados y me gustaría que esten subrayados. Muchas gracias

Responder
ana

Ya esta arreglado Gema, solo habia que cambiar el "none" por "underline" jijiji, ya voy aprendiendo :)

Responder
Gem@

yz Biennn Ana, ya veo que cogiste carrera :)

Responder
AndresFanatico

hola Gema

tengo 2 Preguntas

1. el contador de los comentarios me queda junto con el nombre de autor ¿como puedo separarlo?

2. Quisiera poder colocar el nombre de autor centrado con el avatar

Mil Gracias!!

PD: Talvez puedas visitar mi blog para que me puedas ayudar

Responder
Carlos Hernández

Hola Gema, gracias por todo, antes que nada.

Dos cositas:

En mi recien iniciado blog no está funcionando este efecto. ¿que puedo hacer para que funcione? Por favor checalo: http://carlos-and-suly-work.blogspot.com/2009/12/un-nuevo-ano.html

La otra cosita: ¿Cómo puedo hacer para tener un perfil como el tuyo el cual está abajo de este blog. Es decir donde aparece tu foto y más información tuya?

Gracias por todo

Bendiciones

Responder
Gem@

:: Carlos Hernández tengo problemas para visualizar esa url :S
El perfil es simplemente html, ubicar la imagen de la siguiente forma:
http://gemablog-.blogspot.com/2008/04/pie-de-foto-o-leyenda.html
Y el resto son enlaces tipo texto.

Responder
Carlos Hernández

Hola Gema,

Precisamente a eso me refería. Yo apliqué los pasos que explicas en esta entrada a mi blog y desde entonces cuando voy a entradas donde hay unos comentarios no funciona. Esta es la dirección de mi blog. Haz clic en una entrada llamada "Un nuevo año" y notarás lo mencionado. ¿Que puedo hacer? ¿Será que mi plantilla no es compatible con este efecto?

:$ Que verguenza pero ya que soy un novato no sé si entendí lo del perfil y el html. ¿Te refieres a que debo utilizar un gadget de html y ponerlo al final posterior de mi blog para que quede como el tuyo?

Gracias por tu paciencia.

Bendiciones

http://carlos-and-suly-work.blogspot.com/

Responder
Gem@

:: Pues lo primero de todo quitar lo que se añadió :S y luego vamos a añadir el mismo efecto sólo que de otro modo, será quizás más trabajo pero dará mejor resultado.
Se trata de añadirlos tal y como yo les tengo, es una idea de Vagabundia y en la siguiente url hay una explicación muy detallada:
http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html

Cuando dije que el perfil está creado con html me refería al contenido del perfil, la forma que se muestra. Otra cosa distinta es el sitio donde se muestra "el footer del blog" (final del blog) en el footer del blog se pueden añadir gadgets, algunas plantillas los traen y en otras hay que añadirlos, yo los tengo en tres columnas de forma que me permite poner tres gadgets en horizontal y a su vez puedo añadir unos sobre otros.
En uno de esos gadgets es donde está incluido el gadget de html con el contenido del perfil :)
Resumiendo, esta es la forma de crear un footer de tres columnas:
http://gemablog-.blogspot.com/2009/04/columnas-en-el-footer.html
- Lo de la vergüenza me ha llegado al alma ¿por qué vergüenza? ¿por preguntar? debo ser una descarada pregunto continuamente y no siento eso :S

Responder
Carlos Hernández

Muchas gracias por todo.
Ahora estoy empezando a trabajar en la solución.
¿Como le hago para mandarte un efecto jquery que aprendí para que tu lo compares y veas si ya lo tienes?

Ya no me averguenzo por preguntar...

Gracias y bendiciones...

Responder
Gem@

:: Saludos Carlos Hernández, me alegra que todo vaya por buen camino, sobre el efecto de jQuery no sé la forma de poder verlo, si está añadido en algún blog puede pasarme el enlace, mi mail también está a disposición de todos es el siguiente:
forevergema(arroba)gmail.com

Responder
Anónimo

Orale gema tu web me es de mucha ayuda pero sabes quisiera poner los numero de lado derecho como los tienes tu pero no me da me ayudas

Responder
Gem@

:: Yo lo hice siguiendo esta entrada C@r/os:
http://gemablog-.blogspot.com/2008/09/nmero-de-comentarios-en-forma-de.html

Responder
Magoplup

Hola Gem@ una ves mas yo con una pregunta para variar :D quiero colocar los numeros del lado derecho segui los pasos de la entrada que haces referencia en tu comentario anterior pero aun asi no me dio creo que se debe a que tengo numeracion en la parte de arriba tambien y la orden se la da es a ese numero por eso quite el truco pero si puedes ve a mi blog de pruebas =D http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

Gracias

Responder
Gem@

:: Ese efecto del número de comentarios en forma de burbuja del enlace de arriba funciona muy bien y sin problemas,la diferencia es que lo que se muestra es la cantidad de comentarios en la entrada y con esta entrada añade un contador a cada comentario.
Las dos formas funcionan bien sólo que la otra ubicas con facilidad la burbuja al principio de la entrada. Debe ser otro problema el que no te aparezca pero debería verlo añadido para saberlo.
Hay otro sistema que se explica en Vagabundia y es el que yo tengo aquí en los comentarios:
http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html

Responder
Magoplup

Bien Gem@ aqui estoy de regreso esta vez dejare el truco aplicado para que lo puedas ver te encontraras con dos numeros de comentarios uno dentro de una burbuja azul y otro en un recuadro algo grande de color verde ese ultimo es el que se dio con el truco de esta entrada http://gemablog-.blogspot.com/2008/09/nmero-de-comentarios-en-forma-de.html

una ves que entras a una de las entradas de el blog en este caso uno de prueba te encuentras con el mismo numero que esta en la entrada principal de el blog pues bien lo que yo quiero no es eso ya que lo tengo aplicado en una burbuja en la parte superior de las entradas principales...

Lo que me gustaria es poder cambiar de ubicasion izquierda a derecha el numero de los comentarios y si es posible poder aunmentar un poco su tamaño eso es lo que quiero hacer hay forma de hacerlo con este mismo truco de JQuery?

Una ves mas esta es la url de el blog de pruebas http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

Gracias y disculpa las molestias que pueda causarte :$

Responder
Gem@

:: Estuve probando Magoplup y resulta complicado ubicar la numeración a la derecha porque al modificar el script también movemos el nombre de autor y queda fuera del bloque.
Por eso te dejé un enlace donde es posible añadir el contador de comentarios tal y como yo lo tengo.

Responder
Magoplup

Wiiiiii Wiiiiiiiiiii Wiiiiiii Gem@ Gem@ disculpa el escandalo jajajaja pero es que lo logre :) logre colocar los numeros de el lado derecho solo aplicandole un float:right; antes de padding:2px;background-color:silver'> :) eso si una ves aplicado por que el codigo luego cambia agregando unos &quot asi que luego de aplicado si lo agregue y quedo perfecto :) puedes verlo aqui http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

Responder
Ɣɑɲęşɑ Ƹ̵̡Ӝ̵̨̄Ʒ

Gemaaaaa help me please!!!!

Bueno antes de nada GRACIAS, GRACIAS y GRACIAS por toda tu ayuda.

1º Estaba buscando como modificar la leyenda de Comentarios (como tu que tienes puesto Opiniones), y bueno no lo encuentro por ningun lado.

2º Ya que encontré lo poner colores a los comentarios me detuve aqui, pero.... solo me sale un comentario completo con color, el otro color solo cubre al nombre del comentarista.

Cuando tengas un ratito (sin prisas) échale un vistazo a esta entrada (http://tertuliademaestrasdeinfantil.blogspot.com/2009/05/gracias-tods.html) que es donde mejor se ve el efecto de los colores.

GRACIAS nuevamente

Salu2

Responder
Gem@

:: Vanesa está en la etiqueta de comentarios lo que ocurre que me cuesta mucho encontrar los títulos adecuados para ñas entradas soy un desastre para eso:
http://gemablog-.blogspot.com/2008/09/modificar-el-texto-de-0-comentarios-1.html

El tema de los comentarios se escapa de mis manos porque todo trabaja con scripts no hay unos estilos para poder modificar :(

Responder
Ɣɑɲęşɑ Ƹ̵̡Ӝ̵̨̄Ʒ

@Gem@

Gracias Gema

Responder
Kaede Shio

Hola Gema, queria saber lo siguiente xD. ¿Seria posible añadirel una especie de barra a de color a los comentarios?, una cosa como esta.

http://img843.imageshack.us/img843/1969/comeee.png

Responder
Gem@

:: Kaede en #comments-block .comment-author puedes añadir color de fondo con background:#aquícolor;

Responder
Kaede Shio

Es algo asi lo que estaba buscando xD, solamente de que la "barra" sale unos cuantos pixeles separa del comentario ¿como puedo arreglar eso?

Gracias por tu atencion!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top